fix(editor): toggle blocks not functioning as actual toggles (#206)#217
Merged
Conversation
- Add dedicated chevron button as visual toggle affordance - Prevent native <summary> click from toggling <details> so title text remains editable via Lexical - Remove select-none from summary to allow cursor placement - Use instanceof guard for event target (node-contains-safety) - Add CSS rotation for chevron when details is open - Add static regression tests for structural fixes Co-authored-by: Ona <no-reply@ona.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Collaborator
Author
|
✅ UI verification passed — design spec compliance confirmed. Static analysis (code review against
Visual verification (Playwright screenshots — desktop dark + mobile):
Note: The collapsible toggle block itself was not present on the test page, so the chevron rendering could not be visually verified. Static analysis confirms the implementation matches spec conventions. |
Collaborator
Author
|
✅ Post-merge verification passed. E2E suite: 49/54 passed, 2 known flaky failures, 3 skipped (serial dependents). The 2 failures are pre-existing and unrelated to this PR:
Ad-hoc smoke tests: All passed.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #206
What
Toggle blocks (collapsible sections) inserted via the
/menu were broken in three ways: clicking the summary to edit the title text toggled the section open/closed,select-noneon the summary prevented cursor placement and text selection, and there was no visual indicator (chevron/arrow) showing the block was collapsible or its current state.How
<button>(withcontentEditable="false") inside the<summary>as the visual toggle affordance. The chevron rotates 90° when open via CSS (details[open] > summary > .collapsible-toggle).<details>toggle on summary clicks so Lexical can handle text editing normally. Only the chevron button triggers expand/collapse.select-noneandcursor-pointerfrom the summary, replaced withflexlayout for chevron + text alignment.instanceof Nodeguard one.targetinstead ofas HTMLElementcast to satisfy the node-contains-safety convention.Testing
collapsible-toggle.test.tsverifying:select-nonecontentEditable="false"pnpm lint && pnpm typecheck && pnpm test)